<template>
	<view class="fullPage p30">
		<view class="container pt200 border-r1 bf shadow">
			<!-- 仓门正在打开中 -->
			<view class="flex_aj column" v-if="socketInfo.code == -1">
				<view class="jiazai mb30">
					<image src="/static/ic_jiazai.png" mode="widthFix" style="width: 134upx;height: 134upx;"></image>
				</view>

				<view>仓门正在开启，请稍等</view>
			</view>

			<!-- 仓门开启失败 -->
			<view class="pw100 flex_aj column" v-if="socketInfo.code == 1010">
				<view class="flex_aj w200 h200 mb30 border-r50p b-danger">
					<u-icon name="close" color="#fff" size="100"></u-icon>
				</view>

				<view class="mb20 ft36">仓门开启失败</view>
			</view>
			<!-- 仓门已打开 -->
			<view class="flex_aj column" v-if="socketInfo.code == 1">
				<view class="flex_aj w230 h230 mb20 border-r50p b-green">
					<image src="/static/chongdian.png" mode="widthFix" style="width: 74upx;height: 100upx;"></image>
				</view>
				<view class="mb30">
					<text class="ft48">{{ socketInfo.cabinets }}</text>
					号仓门
				</view>
				<view class="mb20 lh40 tac">
					<view class="">请将电池放入到指定仓门中</view>
					<view class="">电池接入电源线并关门即可开始充电</view>
					<view class="">未接入电源线关门将取消订单</view>
				</view>
			</view>
			<!--  -->
			<view class="pw100 flex_aj column" v-if="socketInfo.code == 1007">
				<view class="mb30">
					<icon type="warn" size="93" color="#FF7F00"></icon>
				</view>

				<view class="mb20 ft36">当前设备已无可用仓门</view>
			</view>
      <!--  -->
      <view class="pw100 flex_aj column" v-if="socketInfo.code == 1009">
      	<view class="mb30">
      		<icon type="warn" size="93" color="#FF7F00"></icon>
      	</view>
      
      	<view class="mb20 ft36">抱歉！当前仓门不可用！</view>
      </view>
			<!-- 仓门正在打开中 -->
			<view class="flex_aj column" v-if="socketInfo.code == 22222">
				<view class="jiazai mb30">
					<image src="/static/ic_jiazai.png" mode="widthFix" style="width: 134upx;height: 134upx;"></image>
				</view>

				<view>仓门已关闭，正在检测中，预计15秒</view>
			</view>

			<!-- 正在充电 -->

			<view class="pw100 flex_aj column" v-if="socketInfo.code == 2">
				<view class="mb30">
					<icon type="success" size="93"></icon>
				</view>
				<view class="mb20 lh50 tac">
					<view class="">正在为您充电</view>
					<view class="">充电完成后将会发送消息，请注意查收</view>
				</view>
			</view>

			<!-- 未接入电源 -->

			<view class="pw100 flex_aj column" v-if="socketInfo.code == 4">
				<view class="mb30">
					<icon type="warn" size="93" color="#FF7F00"></icon>
				</view>

				<view class="mb80 lh40 tac">
					<view class="">检测到当前仓内未接入电源</view>
					<view class="">请确认插座是否接稳</view>
				</view>

				<view class="pw100 mb30 plr60">
					<u-button type="primary" shape="circle" @click="reOpenChr">重新打开仓门</u-button>
				</view>
				<view class="pw100 plr60">
					<u-button type="default" shape="circle" @click="cancelChrOrder">取消订单</u-button>
          <!-- ({{ cancalTime }}s) -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WS from '@/utils/socket'
	import {
		openDoorChr,
		reOpenChr,
		cancelChrOrder
	} from '@/api/user.js'
	export default {
		name: 'chargeProcess',
		data() {
			return {
				deviceId: '', // 设备id
				orderNo: '',
				socketInfo: {
					code: -1
				}, // socket推送的消息信息
				$ws: null,
				timer: null,
				cancalTime: 15,
        cabinetNo:''
			}
		},
		onLoad(e) {
			this.deviceId = e.deviceId
      this.cabinetNo = e.cabinetNo
			this.openDoorChr()
		},
		onUnload() {
			clearTimeout(this.timer)
			if (this.$ws) {
				this.$ws.close()
			}
		},
		beforeDestroy() {
			clearTimeout(this.timer)
			if (this.$ws) {
				this.$ws.close()
			}
		},
		methods: {
			// 打开仓门
			async openDoorChr() {
				const res = await openDoorChr({
					deviceId: this.deviceId,
          cabinetNo:this.cabinetNo
				})

				if (res.code == 200) {
					this.orderNo = res.data.orderNo
          this.socketInfo = res.data
					this.socketInit()
				} else if (res.code == 1001) {
					this.confirm({
						title: '余额不足',
						content: '当前账户余额不足，请先充值',
						confirmText: '前往充值'
					}).then(result => {
						if (result.confirm) {
							uni.redirectTo({
								url: '/pages/user/wallet/recharge'
							})
						} else {
							this.back()
						}
					})
				} else if (res.code == 1007) {
					this.socketInfo.code = 1007
				}  else if (res.code == 1009) {
					this.socketInfo.code = 1009
				}   else if (res.code == 1010) {
					this.socketInfo.code = 1010
				} else {
					this.confirm({
						content: res.msg || '操作失败',
						showCancel: false
					}).then(res => {
						this.back()
					})
				}
			},

			// 链接设备
			socketInit() {
				let uri = `gzyh_device_result_` + this.orderNo
				this.$ws = new WS(uri)
				this.$ws.onNotify(uri, res => {
					if (res.code == 200) {
						this.socketInfo = res.data
						console.log('this.socketInfo', res);
						this.resultHandle(res.data)
					}
				})
			},
			// 结果处理
			resultHandle(info) {
        console.log('结果处理',info)
				//  0: 仓门打开失败 1:仓门打开成功  2：（此状态作废）仓门已关闭 （正在检测电池）
				// 3：仓门已关闭（检测到电池正在充电）  4：仓门已关闭（未检测到电池）
				const status = info.code
				if (status == 2) {
					this.$ws.close()
					// if (status == 4) {
					// 	this.timeDown()
					// }
				}
			},
			// 取消订单倒计时
			timeDown() {
				if (this.cancalTime <= 0) {
					this.cancelChrOrder()
				} else {
					this.timer = setTimeout(res => {
						this.cancalTime--
						this.timeDown()
					}, 1000)
				}
			},
			// 取消订单
			async cancelChrOrder() {
				clearTimeout(this.timer)
				const res = await cancelChrOrder({
					orderNo: this.orderNo
				})
				this.back()
			},
			// 点击重新开仓
			async reOpenChr() {
        clearTimeout(this.timer)
				const res = await reOpenChr({
					orderNo: this.orderNo
				})
        if(res.code === 200){
          console.log('重新打开')
          this.socketInfo = res.data
          this.socketInit()
        }
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.jiazai {
		width: 134upx;
		height: 134upx;
		border-radius: 50%;
		animation: rotate 2s linear infinite;
		transform: rotate(0deg);
	}
</style>
